import { View, Text, Input, Button, Image } from "@tarojs/components";
import Slideshow from "../../components/Slideshow/Slideshow";
import Presentation from "../../components/Presentation/Presentation";
import Classify from "../../components/Classify/Classify";
import { ClockO, Search, WarningO } from "@react-vant/icons";
import "./home.less";
import { useState } from "react";
import { InfiniteScroll } from "antd-mobile";
export default function home() {
  const select = ["最热", "排行", "最新"];

  const [active, setActive] = useState("");

  const [searchval, setSearchval] = useState("");
  //搜索
  const search = (e: any) => {
    setSearchval(e.target.value);
  };
  const list = [
    {
      id: 1,
      name: "尼",
      named: "普丽斯旦茶餐厅总厨",
      img: "https://img2.baidu.com/it/u=2379505117,2192505148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
      vote: 19745,
      flag: false,
    },
    {
      id: 2,
      name: "吐尔孙",
      named: "普丽斯旦茶餐厅总厨",
      img: "https://img2.baidu.com/it/u=2379505117,2192505148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
      vote: 19745,
      flag: false,
    },
    {
      id: 3,
      name: "尼尔孙",
      named: "普丽斯旦茶餐厅总厨",
      img: "https://img2.baidu.com/it/u=2379505117,2192505148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
      vote: 19745,
      flag: false,
    },
    {
      id: 4,
      name: "加提·吐尔孙",
      named: "普丽斯旦茶餐厅总厨",
      img: "https://img2.baidu.com/it/u=2379505117,2192505148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
      vote: 19745,
      flag: false,
    },
    {
      id: 5,
      name: "吐尔孙",
      named: "普丽斯旦茶餐厅总厨",
      img: "https://img2.baidu.com/it/u=2379505117,2192505148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
      vote: 19745,
      flag: false,
    },
    {
      id: 6,
      name: "尼吐尔孙",
      named: "普丽斯旦茶餐厅总厨",
      img: "https://img2.baidu.com/it/u=2379505117,2192505148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
      vote: 19745,
      flag: false,
    },
    {
      id: 7,
      name: "尼加提·吐尔孙",
      named: "普丽斯旦茶餐厅总厨",
      img: "https://img0.baidu.com/it/u=2273361339,1572266521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=679",
      vote: 19745,
      flag: false,
    },
    {
      id: 8,
      name: "尼加提·吐尔孙",
      named: "普丽斯旦茶餐厅总厨",
      img: "https://img0.baidu.com/it/u=2273361339,1572266521&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=679",
      vote: 19745,
      flag: false,
    },
    {
      id: 9,
      name: "尼加提·吐尔孙",
      named: "普丽斯旦茶餐厅总厨",
      img: "https://img2.baidu.com/it/u=2379505117,2192505148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
      vote: 19745,
      flag: false,
    },
    {
      id: 10,
      name: "尼加提·吐尔孙",
      named: "普丽斯旦茶餐厅总厨",
      img: "https://img2.baidu.com/it/u=2379505117,2192505148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
      vote: 19745,
      flag: false,
    },
  ];
  // 无限滚动
  const [hasMore, setHasMore] = useState(true);
  const [len, setLen] = useState(4);
  async function loadMore() {
    setTimeout(() => {
      setLen(len + 4);
      setHasMore(len < list.length);
    }, 2000);
  }
  return (
    <View className="home">
      <Slideshow />
      <View className="content">
        <View className="title">2020第三届中国调味大师名人堂评选</View>

        {/* 数据展示 */}
        <Presentation />
        {/* 活动规则 */}
        <View className="rule">
          <View className="p">
            <ClockO />
            投票开始：2020-10-08 14:00:00
          </View>
          <View className="p">
            <ClockO />
            投票结束：2021-01-08 23:59:59
          </View>
          <View className="p">
            <WarningO />
            活动规则：每个微信号每天可以投票1次，最少选择 1 位选手，最多选择 2
            位选手
          </View>
        </View>
        {/* 排行 */}
        <View className="rank">
          {select.map((item, index) => {
            return (
              <View
                className={active === item ? "active p" : "p"}
                onClick={() => {
                  setActive(item);
                }}
                key={index}
              >
                {item}
              </View>
            );
          })}
        </View>
        {/* 分类 */}
        <Classify />
        {/* 搜索 */}
        <View className="search">
          <Input
            className="input"
            type="text"
            onInput={(e) => {
              setSearchval(e.target.value);
            }}
            placeholder="请输入选手名称、编号"
          />
          <Button className="btn" onClick={() => search}>
            <Search />
            搜索
          </Button>
        </View>
        {/* 关键字文字提示 */}
        {searchval ? (
          <View className="searchval">
            搜索关键词 “{searchval}”
            <Text onClick={() => setSearchval("")}>取消搜索</Text>
          </View>
        ) : null}
        {/* 选手列表 */}
        <View className="list">
          {list.slice(0, len).map((item: any, index: number) => {
            return (
              <View className="list-item" key={item.id}>
                <Image className="img" src={item.img} mode="widthFix" />
                <View className="h3">{item.name}</View >
                <View className="named">{item.named}</View>
                <View className="vote">{item.vote}票</View>
                <Button
                  className="btn"
                // onClick={() => dispatch(upflag(item.id))}
                >
                  {item.flag ? "取消" : "选择"}
                </Button>
              </View>
            );
          })}
          <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />
        </View>
      </View>
    </View>
  );
}
